<!DOCTYPE html>
<html>
<head>
    <title>01.01 - WebGLRenderer - Skeleton</title>
    <script src="../libs/three.js"></script>
    <style>

        #canvas3d{
            width:800px;
            height:450px;
            margin:100px auto;
        }
    </style>
</head>
<body>
    <div id="canvas3d"></div>
<script>

    // global variables
    var renderer;
    var scene;
    var camera;
    var light;
    var cube;

    function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        // 四个参数分别代表了摄像机的视角、宽高比、近和远两个视截面。
        camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render, sets the background color and the size
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setClearColor(0x333333, 1.0);
        //renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setSize('800', '450');

        // create a cube and add to scene
        var cubeGeometry = new THREE.BoxGeometry(35,20,15,2,3,1);
        var cubeMaterial = new THREE.MeshNormalMaterial({wireframe : true});  //材质

        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        var border = new THREE.EdgesHelper( cube,0xffff00 );  //添加边框
        scene.add(cube);
        scene.add(border);

        // position and point the camera to the center of the scene
        camera.position.x = 20;
        camera.position.y = 18;
        camera.position.z = 35;
        camera.lookAt(scene.position);

        //设置light
        light = new THREE.DirectionalLight(0xff0000, 1.0, 0);
        light.position.set( 200, 200, 200 );//设置光源向量
        scene.add(light);

        // add the output of the renderer to the html element
        document.getElementById('canvas3d').appendChild(renderer.domElement);

        // call the render function
        render();
    }

    function render() {
        renderer.render(scene, camera);
    }

    // calls the init function when the window is done loading.
    window.onload = init;

</script>

</body>
</html>
